//

const MiddleSided2 = ({ data = {} }) => {
  return (
    <div id="section2">
      <div
        className="h-[34px] mt-[700px] leading-[34px] pl-[12px] text-[#0740C4]"
        style={{
          backgroundImage: `url('/compare_title-bg.png')`,
          backgroundRepeat: "no-repeat",
          backgroundSize: "100%",
          backgroundPosition: "50%"
        }}
      >
        二、审计情况
      </div>
      <div className="h-[425px] p-[12px] bg-[rgba(255,255,255,.4)] rounded-[8px] mt-[12px] border-1 border-[#fff]">
        <div className="text-[14px]">
          <div className="h-[26px] leading-[26px] text-[#4E718F] font-[600] text-center">
            审计数据对比
          </div>
          {/* 审计次数 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.auditCountA}次
              </div>
            </div>
            <div className="flex-1 text-center">审计次数</div>
            <div className="flex-1 flex">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.auditCountB}次
              </div>
            </div>
          </div>
          {/* 问题数量 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.problemCountA}
              </div>
            </div>
            <div className="flex-1 text-center">问题数量</div>
            <div className="flex-1 flex">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.problemCountB}
              </div>
            </div>
          </div>
          {/* 整改率 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.rectificationRateA}%
              </div>
            </div>
            <div className="flex-1 text-center">整改率</div>
            <div className="flex-1 flex">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.rectificationRateB}%
              </div>
            </div>
          </div>
          {/* 百分点 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.auditCountA}%
              </div>
            </div>
            <div className="flex-1 text-center">百分点</div>
            <div className="flex-1 flex">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.auditCountB}%
              </div>
            </div>
          </div>
          {/* 审计周期 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.auditPeriodA}
              </div>
            </div>
            <div className="flex-1 text-center">审计周期</div>
            <div className="flex-1 flex">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.auditPeriodB}
              </div>
            </div>
          </div>
          {/* 自审频率 */}
          <div className="flex items-center h-[34px] mt-[12px]">
            <div className="flex-1 flex justify-end">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#54DB5C]">
                {data.selfAuditFrequencyA}
              </div>
            </div>
            <div className="flex-1 text-center">自审频率</div>
            <div className="flex-1 flex">
              <div className="h-[20px] rounded-[4px] pr-[6px] text-center pl-[6px] text-white bg-[#4280EB]">
                {data.selfAuditFrequencyB}
              </div>
            </div>
          </div>
          {/* 结论 */}
          <div className="h-[26px] mb-[12px] leading-[26px] text-[#4E718F] font-[600] text-center">
            结论
          </div>
          <div className="text-[14px] h-[48px] text-[#357FFF] font-[500] text-center bg-[rgba(255,255,255,.8)] p-[4px] pl-[8px] pr-[8px]">
            东方公司审计次数多，问题数量多；西部公司整改率和整改质量更高
          </div>
        </div>
      </div>
    </div>
  )
}

export default MiddleSided2
